import 'package:flutter/material.dart';

//Flutter 富文本
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: ParallaxPageView(),
    );
  }
}

// 🎠 案例 1：视差滚动效果
// 实现页面滚动时背景图和前景内容以不同速度滚动的视差效果。

class ParallaxPageView extends StatefulWidget {
  @override
  _ParallaxPageViewState createState() => _ParallaxPageViewState();
}

class _ParallaxPageViewState extends State<ParallaxPageView> {
  final PageController _pageController = PageController();
  double _currentPage = 0.0;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page!;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('视差滚动效果')),
      body: PageView.builder(
        controller: _pageController,
        itemCount: 5,
        itemBuilder: (context, index) {
          // 计算视差偏移量
          final double relativePosition = index - _currentPage;
          final double parallaxOffset = relativePosition * 100;

          return Container(
            color: Colors.grey[200],
            child: Stack(
              children: [
                // 背景图 - 滚动较慢
                Positioned(
                  left: parallaxOffset * 0.5, // 背景移动速度为前景的一半
                  top: 0,
                  bottom: 0,
                  right: -parallaxOffset * 0.5,
                  child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage(
                          'https://picsum.photos/800/600?random=$index',
                        ),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),

                // 前景内容 - 正常滚动
                Transform.translate(
                  offset: Offset(parallaxOffset, 0),
                  child: Center(
                    child: Container(
                      padding: EdgeInsets.all(20),
                      decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.8),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Text(
                        '页面 ${index + 1}',
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
